<script setup lang="ts">
import { Drawer, Tree, Button } from "ant-design-vue";
import type { TreeProps } from "ant-design-vue";
import { ref, watch } from "vue";

const emit = defineEmits(["cancel"]);

const props = withDefaults(
  defineProps<{
    modalInfo: {
      visible: boolean; //
      title?: string; //
      type?: string; //
      record?: Object;
    };
  }>(),
  {}
);

const treeData: TreeProps["treeData"] = [
  {
    title: "parent 1",
    key: "0-0",
    children: [
      {
        title: "parent 1-0",
        key: "0-0-0",
        children: [
          { title: "leaf", key: "0-0-0-0"},
          { title: "leaf", key: "0-0-0-1" },
        ],
      },
      {
        title: "parent 1-1",
        key: "0-0-1",
        children: [{ key: "0-0-1-0", title: "sss" }],
      },
    ],
  },
];
const expandedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
const selectedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
const checkedKeys = ref<string[]>(["0-0-0", "0-0-1"]);
watch(expandedKeys, () => {
  console.log("expandedKeys", expandedKeys);
});
watch(selectedKeys, () => {
  console.log("selectedKeys", selectedKeys);
});
watch(checkedKeys, () => {
  console.log("checkedKeys", checkedKeys);
});
const onSubmit = () => {};
const onClose = () => {
  emit("cancel");
};
</script>
<template>
  <Drawer
    v-model:open="props.modalInfo.visible"
    :title="props.modalInfo.title"
    @ok="onSubmit"
  >
    <Tree
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      checkable
      :tree-data="treeData"
    />
    <template #footer>
      <div class="text-right">
        <Button style="margin-right: 8px" @click="onClose">关闭</Button>
        <Button type="primary" @click="onSubmit">提交</Button>
      </div>
    </template>
  </Drawer>
</template>

<style scoped></style>
